<template>
  <section class="wrapper">
    <div class="handle-box">
      名称一 <el-input style="width: 150px;" v-model.trim="name1Like" placeholder="筛选关键词" class="handle-input mr10"></el-input>
      名称二 <el-input style="width: 150px;" v-model.trim="name2Like" placeholder="筛选关键词" class="handle-input mr10"></el-input>
      名称三 <el-input style="width: 150px;" v-model.trim="name3Like" placeholder="筛选关键词" class="handle-input mr10"></el-input>
      <el-button icon="delete" class="handle-del" @click="reset">重置</el-button>
      <el-button type="primary" icon="search" @click="search">查询</el-button>
      <el-button type="primary" icon="delete" class="handle-del mr10" @click="handleadd">添加</el-button>
    </div>
    <div >
      <el-table :data="pageList" height="300" class="table" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="name1" label="名称一">
        </el-table-column>
        <el-table-column prop="name2" label="名称二">
        </el-table-column>
        <el-table-column prop="name3" label="名称三">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间">
        </el-table-column>
        <el-table-column prop="endTime" label="开始时间">
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row, '删除')">删除</el-button>
            <el-button type="text" @click="handleEdit(scope.$index, scope.row, '编辑')">编辑</el-button>
            <el-button type="text" class="red" @click="handleShow(scope.$index, scope.row, '查看')">查看</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" >
        <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length">
    </el-pagination>
  </div>
<!--         
        <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="prev, pager, next" :total="list.length">
        </el-pagination> -->
      </div>
    </div>
    <el-dialog
    style="min-width: 400px"
    :title="titleTxt"
      :visible.sync="dialogFormVisible"
      v-dialogDrag>
      <div class="wrap-item">
        <div class="items"><span>id: </span><el-input :disabled="handleType==2" v-model.trim="handleObj.id" placeholder="id"></el-input></div>
        <div class="items"><span>名称一: </span><el-input :disabled="handleType==2" v-model.trim="handleObj.name1" placeholder="名称一"></el-input></div>
      </div>
      <div class="wrap-item">
        <div class="items"><span>名称二: </span><el-input :disabled="handleType==2" v-model.trim="handleObj.name2" placeholder="名称二"></el-input></div>
        <div class="items"><span>名称三: </span><el-input :disabled="handleType==2" v-model.trim="handleObj.name3" placeholder="名称三"></el-input></div>
      </div>
      <div class="wrap-item">
        <div class="items">
          <span>开始日期: </span>
          <el-date-picker
            :disabled="handleType==2"
            v-model="handleObj.startTime"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="items">
          <span>结束日期: </span>
          <el-date-picker
            :disabled="handleType==2"
            v-model="handleObj.endTime"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="handleType!=2" @click="resetData()">重 置</el-button>
        <el-button v-if="handleType!=2" type="primary" @click="send">保 存</el-button>
    </div>
    </el-dialog>
  </section>
</template>

<script>
import reqApis from "../../assets/js/reqApis.js";
export default {
  data () {
    return {
      name1Like: '',
      name2Like: '',
      name3Like: '',
      pageSize: 10,
      currentPage4: 5,
      dialogFormVisible: false,
      handleType: 0,
      totalNumber: null,
      list: [],
      allList: [
        {id: '1', name1: 'test1', name2: 'test11', name3: 'test111', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '2', name1: 'test2', name2: 'test11', name3: 'test111', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '3', name1: 'test3', name2: 'test11', name3: 'test333', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '4', name1: 'test4', name2: 'test22', name3: 'test333', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '5', name1: 'test5', name2: 'test22', name3: 'test333', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '6', name1: 'test6', name2: 'test22', name3: 'test666', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '7', name1: 'test1', name2: 'test33', name3: 'test111', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '8', name1: 'test2', name2: 'test33', name3: 'test222', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '9', name1: 'test3', name2: 'test33', name3: 'test333', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '10', name1: 'test4', name2: 'test44', name3: 'test444', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '11', name1: 'test5', name2: 'test55', name3: 'test555', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '12', name1: 'test6', name2: 'test66', name3: 'test666', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '13', name1: 'test1', name2: 'test11', name3: 'test111', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '14', name1: 'test2', name2: 'test22', name3: 'test222', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '15', name1: 'test3', name2: 'test33', name3: 'test333', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '16', name1: 'test4', name2: 'test44', name3: 'test444', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '17', name1: 'test5', name2: 'test55', name3: 'test555', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '18', name1: 'test6', name2: 'test66', name3: 'test666', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '19', name1: 'test6', name2: 'test66', name3: 'test666', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '20', name1: 'test6', name2: 'test66', name3: 'test666', startTime: '2019/4/9', endTime: '2019/4/13'},
        {id: '21', name1: 'test6', name2: 'test66', name3: 'test666', startTime: '2019/4/9', endTime: '2019/4/13'},
      ],
      pageList: [],
      value1: "",
      value2: "",
      indexNum: -1,
      titleTxt: "title",
      handleObj: {id: '', name1: '', name2: '', name3: '', startTime: '', endTime: ''},
      currentObj: {},
      cur_page: 1
    }
  },
  created(){
    this.list = this.deepCopy(this.allList);
    this.cur_page = 1;
    this.getPageList(this.list);

    
  },
  methods: {
    reset() {
      this.list = this.deepCopy(this.allList);
      this.cur_page = 1;
      this.getPageList(this.list);
      this.name1Like = "";
      this.name2Like = "";
      this.name3Like = "";
    },
    resetData() {
      this.handleObj = {
        id: "",
        name1: "",
        name2: "",
        name3: "",
        startTime: "",
        endTime: ""
      }
      if(this.handleType == 0){
        let datas = this.currentObj;
        this.handleObj  = {
          id: datas.id,
          name1: datas.name1,
          name2: datas.name2,
          name3: datas.name3,
          startTime: datas.startTime,
          endTime: datas.endTime
        }
      }
      

    },
    delAll() {
      
    },
    search(){
      if(this.name1Like != '' || this.name2Like != '' || this.name3Like != '') {
        let newList = this.deepCopy(this.list);
        let result = [];
        let obj = {};
        if(this.name1Like.length>0) {
          obj.name1 = this.name1Like;
        }
        if(this.name2Like.length>0) {
          obj.name2 = this.name2Like;
        }
        if(this.name3Like.length>0) {
          obj.name3 = this.name3Like;
        }
        for(let i=0; i<newList.length; i++) {
          let bool = true;
          for(let attr in obj) {
            if(obj[attr] != newList[i][attr]) {
              bool = false;
            }
          }
          if(bool) {
            result.push(newList[i])
          }
        }
        this.list = result;
        this.cur_page = 1;
        this.getPageList(this.list);
      }else {
        this.$message('请至少输入一个内容');
      }
    },
    deepCopy(obj) {
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'object') {
            result[key] = this.deepCopy(obj[key]);   //递归复制
          } else {
            result[key] = obj[key];
          }
        }
      }
      return result;
    },
    send() {
      let objs = this.handleObj;
      if(objs.id && objs.name1 && objs.name2 && objs.name3 && objs.startTime && objs.endTime){
        if(this.handleType == 0) {
          this.currentObj.id = objs.id;
          this.currentObj.name1 = objs.name1;
          this.currentObj.name2 = objs.name2;
          this.currentObj.name3 = objs.name3;
          this.currentObj.startTime = this.getTime(objs.startTime);
          this.currentObj.endTime = this.getTime(objs.endTime);
        }else if(this.handleType == 1) {
          objs.startTime = this.getTime(objs.startTime);
          objs.endTime = this.getTime(objs.endTime);
          this.allList.unshift(objs);
          this.list = this.deepCopy(this.allList);
          this.cur_page = 1;
          this.getPageList(this.list);
        }
        this.dialogFormVisible = false;
      }else {
        this.$message("字段不能留空")
      }
      
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleadd() {
      this.handleObj = {id: '', name1: '', name2: '', name3: '', startTime: '', endTime: ''}
      this.titleTxt = '添加';
      this.handleType = 1;
      this.dialogFormVisible = true;
    },
    handleEdit(index, row, txt) {
      this.handleType = 0;
      this.dialogFormVisible = true;
      this.titleTxt = txt;

      this.currentObj = row;
      this.handleObj  = {
        id: row.id,
        name1: row.name1,
        name2: row.name2,
        name3: row.name3,
        startTime: row.startTime,
        endTime: row.endTime
      }

    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.list = this.deepCopy(this.allList);
      this.getPageList(this.list);
      console.log(`每页 ${val} 条`);
 
    },
    getPageList(list) {
      this.pageList = [];

      let start = (this.cur_page-1)*this.pageSize;
      let end = this.cur_page*this.pageSize;
      console.log("start, end", start, end);
      for (let i = 0; i < list.length; i++) {
        if(i>=start && i<end) {
          this.pageList.push(list[i]);
        }
        
      } 
    },
    handleCurrentChange(val) {
      console.log("size", val)
      this.cur_page = val;
      this.list = this.deepCopy(this.allList);
      this.getPageList(this.list);
      
    },
    handleDelete(index, row) {
      this.pageList.splice(index, 1);
      this.list.splice(index, 1);
      // this.delVisible = true;
    },
    handleShow(ndex, row, txt) {
      this.dialogFormVisible = true;
      this.titleTxt = txt;
      this.handleType = 2;
      this.handleObj = row;
    },
    getTime(date) {
      let dates = new Date(date);
      let y = dates.getFullYear();
      let m = dates.getMonth()+1;
      let d = dates.getDate();
      let h = dates.getHours();
      let i = dates.getMinutes();
      let s = dates.getSeconds();
      return `${y}-${m}-${d} ${h}:${i}:${s}`;
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  background: #fff;
  // border: 1px solid #ddd;
  // border-radius: 5px;
  height: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  .pagination {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
  .item-css {
    margin-bottom: 10px;
  }
  .wrap-item {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    .items {
      display: flex;
      flex: 1;
      align-items: center;
      span {
        width: 90px;
        text-align: center;
      }
    }
  }
  .item-wrap {
    display: flex;
    justify-content: center;
    .items {
      // width: 260px;
    }
    .r {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
#title-bg {
    & > div.el-dialog__header {
      color: #4491e0
    }
  }
  .handle-box {
    margin-bottom: 20px;
    .handle-select {
      width: 120px;
    }
    .handle-input {
      width: 300px;
      display: inline-block;
    }
  }
  .mr10{
    margin-right: 10px;
  }
  .table {
    font-size: 14px;
  }
}
</style>
<style>
.el-dialog__header {
  background: #4491e0 !important;
  color: white !important;
}
.el-dialog__headerbtn .el-dialog__close {
 color: white !important;
}
.el-dialog__title {
  color: white !important;
}
</style>


